<template>
  <div class="bg_write" v-loading="loading">
    <el-row>
      <el-row>
        <el-col :span="24" class="content_title">
          <el-col :span="12">
            <HeadTitle></HeadTitle>
          </el-col>
          <el-col :span="12"></el-col>
        </el-col>
      </el-row>
      <el-row class="home">
        <el-col :span="24" class="home_box" style="width: 100%;
                    display: flex;
                    flex-flow: nowrap;
                    justify-content: flex-start;">
          <div class="phone">
            <div class="phone_top" style="height:auto;">
              <img src="./../../assets/img/home/phone_header.png" alt style="display:block" />
            </div>
            <div class="turn_body">
              <div class="turn_bj">
                <img src="./../../assets/img/home/turn_bj.png" alt />
              </div>
              <div class="turn_box" v-if="
                  step_form.reward !== undefined && step_form.reward.length > 0
                ">
                <div class="turn_one">
                  <p class="turn_part_title">活动奖品</p>
                  <p class="turn_part_reward">
                    一等奖：
                    {{
                      step_form.reward[0].balance_type == "product"
                        ? step_form.reward[0].product
                        : step_form.reward[0].score || ""
                    }}
                    {{ get_reward(step_form.reward[0].balance_type || "") }}
                  </p>
                  <p class="turn_part_reward">
                    二等奖：{{
                      step_form.reward[1].balance_type == "product"
                        ? step_form.reward[1].product
                        : step_form.reward[1].score || ""
                    }}
                    {{ get_reward(step_form.reward[1].balance_type || "") }}
                  </p>
                  <p class="turn_part_reward">
                    三等奖：{{
                      step_form.reward[2].balance_type == "product"
                        ? step_form.reward[2].product
                        : step_form.reward[2].score || ""
                    }}
                    {{ get_reward(step_form.reward[2].balance_type || "") }}
                  </p>
                </div>
                <div class="turn_two">
                  <p class="turn_part_title">活动时间</p>
                  <p class="turn_part_reward">
                    开始时间：{{ step_form.begin_time | getTimeFormat }}
                  </p>
                  <p class="turn_part_reward">
                    结束时间：{{ step_form.end_time | getTimeFormat }}
                  </p>
                </div>
                <div class="turn_three">
                  <p class="turn_part_title">活动规则</p>
                  <div class="turn_three_rule">
                    <p class="turn_part_end">{{ step_form.readme }}</p>
                    <!-- <p class="turn_part_reward">
                                            1.参与活动抽到奖品，活动页面会弹出中奖提醒，您需如实并及时填写领奖信息；
                    </p>-->
                    <!-- <p class="turn_part_reward">
                                            2.虚拟类奖品将实时进行发放，实物类的奖品将在中奖
                                        </p>
                                        <p class="turn_part_reward">
                                            3.请保证您提供的领奖信息清晰准确，如果因领奖信息有误、不完整或不清晰而导致奖品未能及时收到而导致奖品不能正常发放的情况，视为放弃奖品；
                    </p>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="turn_control">
            <el-steps :active="sel_active" align-center>
              <el-step title="添加活动"></el-step>
              <el-step title="活动设置"></el-step>
              <el-step title="奖项设置"></el-step>
              <el-step title="完成"></el-step>
            </el-steps>

            <div class="turn_control_part">
              <div class="turn_control_part_box" v-show="step_one_show">
                <div class="turn_control_one">
                  <el-form ref="form" :model="step_form" :label-width="formLabelWidth">
                    <el-form-item label="活动名称：">
                      <el-col :span="12">
                        <el-input clearable v-model="step_form.title"></el-input>
                      </el-col>
                    </el-form-item>

                    <el-form-item label="活动时间：">
                      <el-col :span="12">
                        <el-date-picker clearable style="width:100%" v-model="createTime" type="datetimerange" align="right" unlink-panels value-format="timestamp" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="活动说明：">
                      <el-col :span="22">
                        <el-input type="textarea" :rows="8" show-word-limit v-model="step_form.readme"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" size="mini" @click="next()">下一步</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div class="turn_control_part_box" v-show="step_two_show">
                <div class="turn_control_one">
                  <el-form ref="form" :model="step_form" :label-width="formLabelWidth">
                    <el-form-item label="会员等级：">
                      <el-col :span="12">
                        <el-select v-model="step_form.rating" clearable placeholder="请选择">
                          <el-option v-for="item in lev_options" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                      </el-col>
                    </el-form-item>

                    <el-form-item label="是否仅限：">
                      <el-col :span="4">
                        <el-switch :width="82" v-model="step_form.is_only_rating" active-color="#13ce66" inactive-color="#999999" active-value="1" inactive-value="0"></el-switch>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="活动场景：">
                      <el-col :span="12">
                        <el-select v-model="step_form.con" clearable placeholder="请选择">
                          <el-option v-for="(item, n) in con_options" :key="n" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-col>
                    </el-form-item>

                    <el-form-item label="所需房票：" v-if="step_form.con == '房票抽奖'">
                      <el-col :span="12">
                        <el-input clearable v-model="step_form.money">
                          <span slot="append">房票</span>
                        </el-input>
                      </el-col>
                    </el-form-item>
                    <!-- <el-form-item label="未中奖，是否返还：">
                                            <el-col :span="4">
                                                <el-switch :width="82"
                                                    v-model="step_form.is_back"
                                                    active-color="#13ce66"
                                                    inactive-color="#999999"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                            </el-col>
                    </el-form-item>-->

                    <el-form-item label="参与次数：">
                      <el-col :span="24">
                        <el-radio v-model="step_form.join_limit" label="一天一次">一天一次</el-radio>
                        <el-radio v-model="step_form.join_limit" label="一人一次">一人一次</el-radio>
                        <el-radio v-model="step_form.join_limit" label="一天两次">一天两次</el-radio>
                        <el-radio v-model="step_form.join_limit" label="不限参与次数">不限参与次数</el-radio>
                        <el-radio v-model="step_form.join_limit" label="一天12次每小时一次">一天12次每小时一次</el-radio>
                      </el-col>
                    </el-form-item>

                    <el-form-item>
                      <el-button type="primary" size="mini" @click="previous()">上一步</el-button>
                      <el-button type="primary" size="mini" @click="next()">下一步</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div class="turn_control_part_box" v-show="step_three_show">
                <div class="turn_control_one">
                  <el-form ref="form" :model="step_form" :label-width="formLabelWidth">
                    <div class="turn_control_reward">
                      <!-- <p>奖品设置</p> -->
                      <div v-for="(item, i) in step_form.reward" :key="i" class="turn_control_reward_item">
                        <p>{{ item.win_title }}：</p>
                        <div class="turn_control_reward_item_box">
                          <el-form-item label="要求等级：">
                            <el-col :span="12">
                              <el-select v-model="item.rating" clearable placeholder="请选择">
                                <el-option v-for="item in lev_options" :key="item.id" :label="item.title" :value="item.id"></el-option>
                              </el-select>
                            </el-col>
                          </el-form-item>
                          <el-form-item label="奖品类别：">
                            <el-col :span="12">
                              <el-select v-model="item.balance_type" clearable placeholder="请选择">
                                <el-option v-for="item in pro_options" :key="item.label" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                            </el-col>
                          </el-form-item>
                          <el-form-item v-if="item.balance_type != 'product'" label="赠送值：">
                            <el-col :span="12">
                              <el-input clearable v-model="item.score"></el-input>
                            </el-col>
                          </el-form-item>
                          <el-form-item v-else label="指定商品ID">
                            <el-col :span="10">
                              <div v-if="item.score != ''">
                                <div>
                                  <el-tag type="success">{{
                                    "id：" + item.score
                                  }}</el-tag>
                                </div>
                              </div>
                              <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop(i)">选择商品</el-button>
                            </el-col>
                          </el-form-item>
                          <el-form-item label="中奖率：">
                            <el-col :span="12">
                              <el-input clearable v-model="item.win_percent">
                                <span slot="append">‰</span>
                              </el-input>
                            </el-col>
                          </el-form-item>
                          <el-form-item label="中奖提示语：">
                            <el-col :span="12">
                              <el-input clearable v-model="item.win_say"></el-input>
                            </el-col>
                          </el-form-item>
                        </div>
                      </div>

                      <div class="turn_control_reward_item">
                        <p>未中奖提示语：</p>
                        <div class="turn_control_reward_item_box">
                          <el-form-item label>
                            <el-col :span="22">
                              <el-input type="textarea" :rows="8" show-word-limit v-model="step_form.not_win_say"></el-input>
                            </el-col>
                          </el-form-item>
                        </div>
                      </div>
                    </div>

                    <el-form-item>
                      <el-button type="primary" size="mini" @click="previous()">上一步</el-button>
                      <el-button type="primary" size="mini" @click="sub_btn()">提交</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <xzShop :show="showshop" v-if="showshop" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow"></xzShop>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import xzShop from "@/components/currency/xz_shop.vue";

export default {
  name: "turntable_set",
  data() {
    return {
      is_add: Boolean,
      step_one_show: true,
      step_two_show: false,
      step_three_show: false,
      lev_options: [],
      pro_options: [], //this.$store.state.rewardOption,
      con_options: ["支付后", "指定抽奖", "评价后", "房票抽奖"], //"分享后","支付后", "评价后", "指定抽奖", "砍价后"
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      createTime: [],
      step_form: {
        money: "",
        title: "", //活动名称
        begin_time: "", //开始时间
        end_time: "", //结束时间
        readme: "", //活动说明
        rating: "", //会员等级
        is_only_rating: 0, //是否仅限 0否1是
        con: "", //活动场景
        join_limit: "", //参与次数控制
        not_win_say: "", //未中奖提示语
        reward: [
          {
            win_title: "一等奖", //本奖名称
            rating: "", //达到该等级才能中本奖
            score: "", //赠送值
            balance_type: "", //赠送资金类型
            win_percent: "", //中奖率
            win_say: "", //中奖提示语
          },
          {
            win_title: "二等奖",
            rating: "",
            score: "",
            balance_type: "",
            win_percent: "",
            win_say: "",
          },
          {
            win_title: "三等奖",
            rating: "",
            score: "",
            balance_type: "",
            win_percent: "",
            win_say: "",
          },
        ],
      },
      sel_active: 1,
      formLabelWidth: "150px",
      loading: false,
      showshop: false,
      level: "",
    };
  },
  components: {
    HeadTitle,
    xzShop,
  },
  created() {
    this.get_user_lev();
    if (
      this.$route.query.id == undefined ||
      this.$route.query.id == "" ||
      this.$route.query.id == null
    ) {
      this.is_add = true;
    } else {
      this.is_add = false;
    }
    this.is_add ? "" : this.get_single(this.$route.query.id);
  },
  mounted() {
    this.pro_options = this.$store.state.rewardOption;
    var obj = { value: "product", label: "商品" };
    if (JSON.stringify(this.pro_options).indexOf(JSON.stringify(obj)) === -1) {
      this.pro_options.push(obj);
    }
  },
  methods: {
    get_reward(val) {
      let label = "";
      this.pro_options.forEach((item) => {
        if (item.value == val) {
          label = item.label;
        }
      });
      return label;
    },
    sub_btn() {
      var params = {};
      var reward = JSON.stringify(this.step_form.reward);
      params = JSON.parse(JSON.stringify(this.step_form));
      params.reward = reward;
      this.loading = true;
      if (this.is_add) {
        this.$api.getPlugin.set_turntable(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            this.$router.push({ path: "/index/plugin/turntable" });
            this.loading = false;
          } else {
            this.$fnc.alertError(res.data.result);
            this.loading = false;
          }
        });
      } else {
        params.id = this.$route.query.id;
        this.$api.getPlugin.set_single_turntable(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
            this.get_single(this.$route.query.id);
            this.loading = true;
          } else {
            this.$fnc.alertError(res.data.result);
            this.loading = true;
          }
        });
      }
    },
    get_single(id) {
      this.loading = true;
      this.step_form = {
        title: "", //活动名称
        begin_time: "", //开始时间
        end_time: "", //结束时间
        readme: "", //活动说明
        rating: "", //会员等级
        is_only_rating: 0, //是否仅限 0否1是
        con: "", //活动场景
        join_limit: "", //参与次数控制
        not_win_say: "", //未中奖提示语
        money: "", 
        reward: [
          {
            win_title: "一等奖", //本奖名称
            rating: "", //达到该等级才能中本奖
            score: "", //赠送值
            balance_type: "", //赠送资金类型
            win_percent: "", //中奖率
            win_say: "", //中奖提示语
            lv: "",
          },
          {
            win_title: "二等奖",
            rating: "",
            score: "",
            balance_type: "",
            win_percent: "",
            win_say: "",
            lv: "",
          },
          {
            win_title: "三等奖",
            rating: "",
            score: "",
            balance_type: "",
            win_percent: "",
            win_say: "",
            lv: "",
          },
        ],
      };

      this.$api.getPlugin.single_turntable({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.step_form.title = res.data.result.title;
          this.step_form.money = res.data.result.money
            ? Number(res.data.result.money || 0)
            : "";
          this.step_form.begin_time = res.data.result.begin_time;
          this.step_form.end_time = res.data.result.end_time;
          this.step_form.readme = res.data.result.readme;
          this.step_form.rating = res.data.result.rating;
          this.step_form.is_only_rating = res.data.result.is_only_rating;
          this.step_form.con = res.data.result.con;
          this.step_form.join_limit = res.data.result.join_limit;
          this.step_form.not_win_say = res.data.result.not_win_say;
          this.step_form.reward = res.data.result.reward;
          this.createTime.push(this.$fnc.vuetime(res.data.result.begin_time));
          this.createTime.push(this.$fnc.vuetime(res.data.result.end_time));
          for (let i in this.step_form.reward) {
            if (this.step_form.reward[i].balance_type == "product") {
              this.$api.getShops
                .selectShopsItem({ id: this.step_form.reward[i].score })
                .then((res) => {
                  if (res.data.code == 200) {
                    this.step_form.reward[i].product = res.data.result.title;
                  }
                });
            }
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
    get_user_lev() {
      //得到用户等级

      this.$api.getUser.getRatingList({}).then((res) => {
        if (res.data.code == 200) {
          this.lev_options = res.data.result;
        }
      });
    },
    previous() {
      if (this.sel_active > 0) {
        this.sel_active--;
      }
    },
    next() {
      if (this.sel_active <= 3) {
        this.sel_active++;
      }
    },
    xzshop(i) {
      if (
        this.$store.state.shopSlist == "" ||
        this.$store.state.shopSlist.page != 1
      ) {
        this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      }
      this.level = i;
      this.showshop = true;
    },
    getSend(row) {
      if (row.id == 0) {
        this.$fnc.alertError("请指定商品ID");
      } else {
        this.step_form.reward[this.level].score = row.id;
        this.step_form.reward[this.level].product = row.title;
      }
    },
    getShow(val) {
      this.showshop = val;
    },
  },
  watch: {
    createTime(val) {
      if (val != null) {
        this.step_form.begin_time = this.$fnc.phptime(val[0]);
        this.step_form.end_time = this.$fnc.phptime(val[1]);
      } else {
        this.step_form.begin_time = "";
        this.step_form.end_time = "";
      }
    },
    sel_active(old, after) {
      switch (old) {
        case 1:
          this.step_one_show = true;
          this.step_two_show = false;
          this.step_three_show = false;
          break;
        case 2:
          this.step_two_show = true;
          this.step_one_show = false;
          this.step_three_show = false;
          break;
        case 3:
          this.step_three_show = true;
          this.step_one_show = false;
          this.step_two_show = false;
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/page.css";
.turn_body {
  width: 100%;
  position: relative;
}
.turn_bj {
  width: 100%;
}
.turn_bj img {
  width: 100%;
}
.turn_box {
  position: absolute;
  top: 575px;
  left: 0;
  right: 0;
}
.turn_one {
  width: 100%;
  height: 180px;
}
.turn_part_title {
  font-size: 18px;
  color: #ffe88e;
  font-weight: bold;
  line-height: 26px;
}
.turn_part_reward {
  width: 80%;
  margin: 0 auto;
  font-size: 16px;
  color: #ffe88e;
  font-weight: bold;
  line-height: 30px;
  text-align: left;
}
.turn_part_end {
  width: 80%;
  margin: 0 auto;
  font-size: 16px;
  color: #ffe88e;
  font-weight: bold;
  line-height: 30px;
  word-wrap: break-word;
  word-break: break-all;
}
.turn_two {
  width: 100%;
  height: 120px;
}
.turn_three {
  width: 100%;
}
.turn_three_rule {
  background-color: #ec4731;
  padding: 20px 0;
  height: 400px;
}
.turn_control {
  width: 70%;
  margin-top: 50px;
}
.turn_control_part {
  width: 80%;
  padding: 20px 50px;
}
.turn_control_part_box {
  background-color: #fbfbfb;
  /* height: 200px; */
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  padding: 20px 50px;
}
.turn_control_part_box .el-form-item {
  margin-bottom: 30px;
}
.turn_control_reward {
  width: 100%;
}
.turn_control_reward > p {
  font-size: 18px;
  line-height: 36px;
  color: #cecece;
  text-align: center;
}
.turn_control_reward_item {
  width: 100%;
  background-color: #f0f0f0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.turn_control_reward_item > p {
  font-size: 16px;
  text-align: left;
  /* border-left: 5px solid #4483e9; */
  color: #606266;
  line-height: 30px;

  padding: 20px 0 20px 10px;
}
</style>
